not need to pass in the token because these two operations don’t require authentication.

Analyze Code

<Route path="/login" render={(props)=>

<Login {...props} login={login} />

}>

</Route>

<Route path="/signup" render={(props)=>

<Signup {...props} signup={signup} />

}>

</Route>

Note that the login route passes in the login function as a prop:

Analyze Code

async function login(user = null){ // default user to null

setUser(user);

}

This allows the login function to be called from the Login component and thus populate the user state variable as

we will see later. The same applies for signup.

Testing our Routes

If you run your React frontend now and click on the different links in the navbar, you will see the different

components being rendered (fig. 1).

Figure 1

Creating Footer Section

In App.js, we make the following changes in bold to create the footer section.

Modify Bold Code

…

return (

<div className="App">

<Navbar bg="primary" variant="dark">

...

</Navbar>

<div className="container mt-4">

…

</div>

<footer className="text-center text-lg-start

bg-light text-muted mt-4">

<div className="text-center p-4">

© Copyright - <a

target="_blank"

className="text-reset fw-bold text-decoration-none"

href="https://twitter.com/greglim81"

>

Greg Lim

</a> - <a

target="_blank"

className="text-reset fw-bold text-decoration-none"

href="https://twitter.com/danielgarax"

>

Daniel Correa

</a>

</div>

</footer>

</div>

…

The footer section displays a grey div in where we place the book authors ’ names, with a link to their respective